<template>
  <div class="locale-box">
<!--    <span class="label">{{$t('language.title')}}</span>-->
    <el-select
        class="lan-select"
        v-model="currentLocale"
        @change="changeLanguage">
      <el-option value="zh" label="简体中文">简体中文</el-option>
      <el-option value="en" label="English">English</el-option>
    </el-select>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';

const emits = defineEmits(['change'])
const { locale } = useI18n();
const currentLocale = ref(locale.value);

const changeLanguage = () => {
  locale.value = currentLocale.value;
  emits('change', locale.value)
};
</script>

<style scoped lang="scss">
.locale-box{
  display: flex;
  align-items: center;
  .label{
    margin-right: 10px;
  }
  .lan-select{
    width: 120px;
  }
}
</style>
